<template>
    <div>
        <h2>产品月销</h2>
        <div ref="chart" class="chart"></div>
    </div>
</template>
<script setup>
import { ref, inject, onMounted } from 'vue'
import { useDebouncedResize } from '@/utils/hooks/useDebouncedResize'
import { useEChart } from '@/utils/hooks/useEchart'

const echarts = inject('echarts')
const axios = inject('axios')
const chart = ref(null)

const pieData = ref(null)

// 使用抽离的echarts Hook
const { initChart, disposeChart, getInstance, resizeChart } = useEChart()

const getPieData = async () => {
    const res = await axios.get('/three/data')
    pieData.value = res.data.data.chartData
}

onMounted(async () => {
    await getPieData()
    const option = {
        legend: {
            top: 'bottom',
        },
        tooltip: {
            show: true,
            borderRadius: 10,
        },
        series: [
            {
                type: 'pie',
                roseType: 'area',
                radius: [10, 100],
                center: ['50%', '45%'],
                itemStyle: {
                    borderRadius: 10,
                },
                data: pieData.value,
            },
        ],
        // color:['#c12e34','#e6b600','#0098d9','#2b821d','#005eaa','#339ca8'],
    }
    initChart(echarts, chart, option)
})

// 使用抽离的防抖resize Hook
useDebouncedResize(resizeChart, 500)
</script>
<style lang="less" scoped>
h2 {
    /* 48像素 */
    height: 0.6rem;
    color: #fff;
    line-height: 0.6rem;
    text-align: center;
    font-size: 0.25rem;
}
.chart {
    /* 高度360 */
    height: 4.5rem;
}
</style>
